<template>
  <div>
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters" @submit.native.prevent>
        <el-form-item width="1000%">
          <el-input
            clearable
            :span="18"
            type="input"
            style="width:1000px"
            v-model="mytext"
            width="80%"
            prefix-icon="el-icon-search"
            placeholder="请输入链接"
            @keyup.enter.native="bindQRCode"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="bindQRCode">生成二维码</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <div id="qrCode" ref="qrCodeDiv"></div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
export default {
  methods: {
    bindQRCode: function() {
      document.getElementById("qrCode").innerHTML = "";

      new QRCode(this.$refs.qrCodeDiv, {
        text: this.mytext,
        width: 200,
        height: 200,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
      });
    },
  },
  mounted() {
    this.$nextTick(function() {
      this.bindQRCode();
    });
  },
};
</script>
<style scoped>
h1 {
  color: red;
}
</style>
